<template>
  <div :id="config.id" :style="rootStyle">
  </div>
</template>

<script>
// import Player from 'xgplayer';  //普通MP4
import 'xgplayer';
import Player from 'xgplayer-hls.js'; // m3u8
export default {
  props: {
    config: {
      type: Object,
      default () {
        return {
          id: 'mse',
          url: '',
        }
      }
    },
    rootStyle: {
      type: Object,
      default () {
        return {

        }
      }
    }
  },
  data: function () {
    return {
      player: null
    }
  },
  mounted() {
    this.init();
  },
  beforeUpdate() {
    this.init();
  },
  beforeDestroy() {
    this.player && typeof this.player.destroy === 'function' && this.player.destroy();
  },
  methods: {
    init() {
      const self = this;
      if (self.config.url && this.config.url !== '') {
        self.player = new Player(this.config);
        self.$emit('player', this.player)
      }
    }
  }
}
</script>
